import React, { Component } from 'react';
import { Link, routerRedux } from 'dva/router';
import { connect } from 'dva';

import { List, InputItem,  Toast, Flex,Icon,WingBlank} from 'antd-mobile';
import NavTopBar from '../../components/NavTopBar/NavTopBar';

const {Item} =List;
const Brief = Item.Brief;

class Security extends Component {
    constructor(props) {
        super(props);
        this.state={

        }
    }

    componentDidMount(){
        console.log(this.props.match.params.data)
    }


    render() {

        return (
            <Flex style={{
                height:"100%",
                width:"100%"
            }} direction="column"

            >
                <NavTopBar title="账户安全" dispatch={this.props.dispatch}/>
                <List style={{width:"100%"}}>
                    <Item arrow="horizontal" onClick={()=>{
                        this.props.dispatch(routerRedux.push({
                            pathname:`/myPhone/${this.props.match.params.data.replace(/(\\d{3})\\d{4}(\\d{4})/, '$1****$2')}/memberPwd`
                            // pathname:`/memberPwd/${this.props.match.params.data.replace(/(\\d{3})\\d{4}(\\d{4})/, '$1****$2')}`
                        }))
                    }}>修改密码 <Brief>建议您定期修改密码,保护账户安全</Brief> </Item>
                    <Item arrow="horizontal" onClick={()=>{
                        this.props.dispatch(routerRedux.push({
                            pathname:`/myPhone/${this.props.match.params.data.replace(/(\\d{3})\\d{4}(\\d{4})/, '$1****$2')}/payPwd`
                            // pathname:`/payPwd`
                        }))
                    }}>支付密码 <Brief>支付密码仅用于余额支付</Brief> </Item>
                    <Item arrow="horizontal" onClick={()=>{
                        this.props.dispatch(routerRedux.push({
                            pathname:`/myPhone/${this.props.match.params.data}`
                        }))
                    }} extra={this.props.match.params.data.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')}>手机验证 <Brief>若手机号更换请尽快验证</Brief> </Item>
                </List>
            </Flex>
        );
    }
}

export default connect(({ accountManagement }) => ({ accountManagement }))(Security);
